<template>
	<view class="">

		<button open-type="chooseAvatar" @chooseavatar="chooseavatar" class="infoItemImg flex_center m-b-40 m-t-30">
			<view class="flex_center textC">
				<image :src="$util.img(avatar)" v-if="avatar" mode=""></image>
				<image v-else src="/static/userNone.png" mode=""></image>
			</view>
		</button>
		<button class="font-34 font-weight textC m-t-24 noneBtnA" open-type="chooseAvatar"
			@chooseavatar="chooseavatar">修改头像</button>

		<view class="flex_b aboutItem m-t-80">
			<view class="font-28">昵称</view>
			<input type="nickname" @keyboardheightchange="keyboardheightchange" @input="input" v-model="nickname"
				placeholder-class="font-30" style="text-align: right;" placeholder="请输入昵称">
		</view>

		<view class="bomPosition">
			<button class="m-b-30" @click="submit">保存</button>
			<button class="m-b-20" style="background-color: #ededee;color: #000;" @click="closeLogin">退出登录</button>
		</view>
		<uv-toast ref="uToast"></uv-toast>
	</view>
</template>

<script>
	import config from "@/common/js/config.js"
	export default {
		data() {
			return {
				avatar: '',
				nickname: '',
				userInfo: {}
			};
		},
		mixins: ['config'],
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/user/index',
					success: res => {
						if (res.code == 1) {
							this.userInfo = res.data.userinfo
							this.avatar = res.data.userinfo.avatar
							this.nickname = res.data.userinfo.nickname
						}
					}
				})
			},

			closeLogin() {
				uni.showModal({
					title: '提示',
					content: '确认退出登录吗？',
					success: res => {
						if (res.confirm) {
							uni.removeStorage({
								key: 'token',
								success: res => {
									uni.navigateBack()
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// 退出登录

			},


			chooseavatar(e) {
				// 上传头像
				uni.uploadFile({
					url: `${config.baseUrl}/api/common/upload`,
					filePath: e.detail.avatarUrl,
					name: 'file',
					success: resA => {
						let a = JSON.parse(resA.data)
						this.avatar = a.data.fullurl
					},
					fail: err => {

					}
				});
			},
			keyboardheightchange(e) {
				console.log(e);
			},
			input(e) {
				this.nickname = e.detail.value
			},
			submit() {
				if (!this.nickname) {
					uni.showToast({
						title: '请填写昵称',
						icon: "error"
					})
					return
				}
				if (!this.avatar) {
					uni.showToast({
						title: '请上传头像',
						icon: "error"
					})
					return
				}
				this.$api.sendRequest({
					url: '/api/user/profile',
					data: {
						nickname: this.nickname,
						avatar: this.avatar
					},
					success: res => {

						if (res.code == 1) {
							this.$refs.uToast.show({
								type: 'default',
								message: '修改成功',
								duration: 1500
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						} else {
							this.$refs.uToast.show({
								type: 'default',
								message: res.msg,
								duration: 1500
							})
						}
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.noneBtnA {
		margin: 0;
		padding: 0;
		// outline: none;
		border-radius: 0;
		background-color: transparent;
		color: #000;
		// width: max-content
	}

	.infoItemImg {
		height: 120rpx;
		width: 120rpx;
		outline: none;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
		border: none;

		image {
			height: 120rpx;
			width: 120rpx;
			border-radius: 50%;
		}
	}

	.editImage {
		margin-top: 100rpx;
		width: 152rpx;
		height: 152rpx;
		border-radius: 50%;
		text-align: center;
	}

	.aboutItem {
		padding: 30rpx;
		border-bottom: 1rpx solid #f1f4f8;

		input {
			text-align: right;
			font-size: 28rpx;
		}
	}
</style>
